{% extends "base.html" %} {% block title %}IPentaE - Result{% endblock %}
<link rel="stylesheet" href="../static/bootstrap.css" />
{% block page_content %}

<style>
    .result {
        margin-top: auto;
        margin-bottom: auto;
        margin-left: auto;
        margin-right: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        display: block;
    }
    .single-item {
        margin-top: 10px;
        margin-bottom: 10px;
        border: 4px;
        border-color: dimgray;
        border-style: solid;
        height: 470px;

        /* margin-left: auto;
            margin-right: auto; */
    }

    .pic img {
        height: 360px;
        width: 360px;
    }
    .price p {
        color: red;
        font-size: small;
        display: inline;
    }
    #pagination_link {
        text-align: center;
        display: block;
    }
</style>

<h1>Result</h1>
<!-- res pagination keyword -->
{% if keyword %}
<div class="row">
    <h2>Search for {{ keyword }}</h2>
    <br />
</div>
{% endif %}

<div class="row">{{ pagination.info }}</div>

<div class="result">
    {% for element in res %} {% if loop.index % 2 == 0 %}
    <div
        class="col-xs-6 col-sm-6 col-lg-6 single-item"
        style="border-left: 0ch"
    >
        {% else %}
        <div
            class="col-xs-6 col-sm-6 col-lg-6 single-item"
            style="border-right: 0ch"
        >
            {% endif %}

            <div class="pic">
                <a href="../item?id={{element.id}}">
                    <img
                        src="{{element.image_url|get_first}}"
                        alt="运动服饰图片"
                    /><br /> </a
                ><br />
            </div>

            <a href="../item?id={{element.id}}">{{element.Name|safe}}</a><br />
            <div class="price">
                <p>￥</p>
                <strong> {{element.price}} </strong><br />
            </div>

            <span>好评率: {{element.rate}}</span>
        </div>
        {% endfor %}
    </div>
    <hr />
    <div id="pagination_link">{{ pagination.links }}</div>

    {% endblock %}
</div>
